<template>
  <div class="divcss2">
    <div class="divcss3">
      <h3>查询条件</h3>
      <el-divider></el-divider>
      对账单号:<el-input
      placeholder=""
      prefix-icon="el-icon-search"
      v-model="billStatementNo"
      style="width: 20%;margin-bottom: 15px"
    >
    </el-input>

<!--      订单号:<el-input-->
<!--      placeholder=""-->
<!--      prefix-icon="el-icon-search"-->
<!--      v-model=""-->
<!--      style="width: 20%;margin-bottom: 15px"-->
<!--    >-->
<!--    </el-input>-->
<!--      客户名称:<el-input-->
<!--      placeholder=""-->
<!--      prefix-icon="el-icon-search"-->
<!--      v-model="customerName"-->
<!--      style="width: 20%;margin-bottom: 15px"-->
<!--    >-->
<!--    </el-input>-->

      <el-button @click="search" type="success"> 查询</el-button>
    </div>

    <div class="divcss4">
      <h3>对账单列表</h3>
      <el-divider></el-divider>
      <el-button icon="el-icon-check" @click="cusoconfirm" style="margin-bottom: 20px">客户确认</el-button>
      <!--    订单状态切换查看-->
      <el-row style="margin-bottom: 10px">
        <el-button type="info" round @click="billStatuss=0,findBillstaments()">未提交<font color="#8b0000" v-model="total" v-if="total !== 0 && billStatuss === 0">({{total}})</font></el-button>
        <el-button type="info" round @click="billStatuss=1,findBillstaments()">已提交<font color="#8b0000" v-model="total" v-if="total != 0 && billStatuss === 1">({{total}})</font></el-button>
        <el-button type="info" round @click="billStatuss=2,findBillstaments()">全部<font color="#8b0000" v-model="total" v-if="total != 0 && billStatuss === 2">({{total}})</font></el-button>
      </el-row>
      <el-table
        ref="arr"
        :data="billstaments"
        border
        style="width: 1200px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="billStatementNo"
          label="对账单号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="客户名称"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单数量"
          width="200"
        >
        </el-table-column>

        <el-table-column
          prop="totalReceive"
          label="应收总计"
          width="200"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="danger" size="small">管理</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div>

  </div>

</template>

<script>
    export default {
        data(){
          return{
            arr:[],
            billStatementNo:"",
            currentPage:1,
            pageSize:2,
            pageSizes:[2,3,4],
            billStatuss:2,
            billstaments:[]

          }
        },
      methods:{
        findBillstaments(){
          this.$http({
            method:"GET",
            url:"http://localhost/billStatement/lists",
            params:{
              currentPage:this.currentPage,
              pageSize:this.pageSize,
              billStatementNo:this.billStatementNo,
              billStatuss:this.billStatuss
            }
          }).then(resp=>{
            console.log(resp.data);
            this.billstaments = resp.data.data.list;
            this.total = resp.data.data.total;
          })
        },

        handleSizeChange(val){
          this.pageSize = val;
          this.findBillstaments();
        },

        handleCurrentChange(val){
          this.currentPage = val;
          this.findBillstaments();
        },
        handleClick(row){
          console.log(row);
          let name = row.customerName;
          this.$router.push("/finance/checkBillDetail?name="+name);
        },

        handleSelectionChange(val) {
          this.arr = val;
          console.log(this.arr.length);
        },
        cusoconfirm(){
          this.$http({
            method:"PUT",
            url:"http://localhost/billStatement",
            data:this.arr
          }).then(resp=>{
            if(resp.data.code==100000){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
            }
          })
        }

      },
      created() {
          this.findBillstaments(1,2);
      }
    }
</script>

<style scoped>

.divcss1{
  background-color: #d3dce6;
  height: 200px;
  border: 1px;
}
.divcss2{
  border:1px;
  border-radius: 2px;
  margin-left: 40px;
}
.divcss3{
  border:1px;
  border-radius: 5px;
  height: 120px;
  width: 1200px;
  background-color: #F2F6FC;
}
.divcss4{
  border:1px;
  border-radius: 5px;
  height: 400px;
  width: 1200px;
  background-color: #F2F6FC;
}
.divcss5{
  border:1px;
  border-radius: 5px;
  height: 850px;
  background-color: #F2F6FC;
}
.descript{
  margin-top: 15px;
  border: 1px;
  height: 100px;
  width: 400px;
  line-height: 30px;
  background-color: #bfcbd9;
}
.footer{

  margin-top: 20px;
  margin-left: 400px;
}

.orderbasicinfo{

  margin-top: 30px;
  height:250px;
  background-color: #F2F6FC;
}
.addinfo{
  margin-top: 30px;
  height:250px;
  background-color: #F2F6FC;
}

.addinfo1{
  margin-top: 30px;
  height:300px;
  background-color: #F2F6FC;
}

.goodsinfo{
  margin-top: 30px;
  background-color: #F2F6FC;
}

</style>
